// a 标签去下划线
a {
  text-decoration: none;
  color: black;
}

// 自定义样式类
.clbg {
  color: white;
  background-color: #409EFF;
}

// 文本处于中心
.text-center {
  text-align: center;
}

// 溢出文本省略效果
.text-hidden {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}


#musician {
  margin: 0 auto;
  width: 1060px;
}

#msc1 {
  //background-color: lightgrey;
}

.msc1-c1 {
  height: 260px;
  //background-color: lightgrey;

  .msc1-box {
    float: left;
    box-sizing: border-box;
    padding: 10px 20px;
    width: 325px;
    height: 180px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    &:nth-child(n+2) {
      margin-left: 40px;
    }

    p:first-child {
      font-size: 20px;
    }
  }
}

.msc1-c2 {
  text-align: center;

  a {
    margin-right: 60px;

    &:hover {
      color: #409EFF;
    }
  }
}

//页面视图的第二块: 音乐人数据
#msc2 {
  height: 600px;
  overflow: hidden;
  //margin-top: 40px;
  //background-color: lightgrey;

  .msc2-c1 {
    margin-top: 200px;
  }
}

.msc2-box {
  float: left;
  width: 300px;
  height: 300px;
  background-image: linear-gradient(#409EFF, white);
  border-radius: 150px;
  text-align: center;
  overflow: hidden;

  &:nth-child(n+2) {
    margin-left: 80px;
  }

  &:nth-child(2) {
    background-image: linear-gradient(#67C23A, white);
  }

  &:nth-child(3) {
    background-image: linear-gradient(#F56C6C, white);
  }

  p:first-child {
    margin-top: 100px;

    .number {
      font-size: 30px;
    }
  }
}

//页面视图的第三块: 宝藏功能
#msc3 {
  margin-top: 120px;
  padding-top: 100px;
  height: 600px;
  //background-color: lightgrey;


  .msc3-c1 {
    padding: 100px 0 200px;
    width: 1060px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .msc3-box {
    margin: 0 auto 0;
    width: 800px;
  }
}

//标签页
.el-tab-pane {
  div {
    float: left;
    box-sizing: border-box;
    margin-left: 50px;
    width: 300px;
    height: 200px;

    .title {
      font-size: 20px;
    }
  }
}

//页面视图的第四块: 音乐人计划
#msc4 {
  margin-top: 100px;
  height: 600px;
  overflow: hidden;
  //background-color: lightgrey;

  .msc4-box {
    margin-top: 100px;
  }
}

//页面视图的第五块: 音乐人用户
#msc5 {
  margin-top: 120px;
  padding: 0 4px;
  height: 600px;
  //background-color: lightgrey;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .msc5-box {
    margin-top: 100px;
  }

  .user-box {
    position: relative;
    overflow: hidden;
  }

  .user {
    float: left;
    width: 150px;
    height: 180px;
    cursor: pointer;
    overflow: hidden;

    // 第二个及以后元素
    &:nth-child(n+2) {
      margin-left: 30px;
    }

    // 第七个元素，即第二排第一个元素
    &:nth-child(7) {
      margin-left: 0;
    }

    // 第二排元素
    &:nth-child(n+7) {
      margin-top: 30px;
    }


    &:hover a {
      color: white;
      background-color: rgba(lightgrey, 0.3);
    }
  }

  .el-image {
    position: absolute;
    border-radius: 75px;
  }

  a {
    position: absolute;
    display: inline-block;
    width: 150px;
    height: 150px;
    color: transparent;
    background-color: transparent;
    border-radius: 75px;

    p {
      margin-top: 50px;
      font-size: 14px;
    }
  }

  .user-name {
    margin-top: 160px;
  }
}
